<!-- 
  选项卡

  props：
    list [Array] 选项卡数据。其中对象影包含：name 展示的文本；key 唯一标识，为空时用 name 代替
    active [String|Number] 设置选中项，值为 list 项中的 key
    refresh-url [Boolean] 是否在 url 上加上 active 参数。默认为 false。

  event
    onChange 切换后的回调方法。接受参数: 
        index 数组计数, 
        key 唯一标识, 
        name 展示的文本,
        item 切换后的选项卡数据，即 list[index],
        event 事件对象

  v-model：active

  slot：
    tool 选项卡右侧工具栏
    tab-panel-[tem.key|item.name] 选项卡对应展示的内容
 -->

<template>
  <div class="_tab-warp">
    <div class="tab-tool">
      <slot name="tool" />
      <div
        v-for="item in list"
        :key="getKey(item)"
        :name="getKey(item)"
        :label="item.name"
      >
        <slot :name="'tab-tool-' + getKey(item)" v-show="activeKey === getKey(item)" />
      </div>
    </div>
    <el-tabs v-model="activeKey" @tab-click="handleChange" type="card">
      <el-tab-pane
        v-for="item in list"
        :key="getKey(item)"
        :name="getKey(item)"
        :label="item.name"
      >
        <slot :name="'tab-panel-' + getKey(item)" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import {
    Tabs,
    TabPane
  } from 'element-ui'

  import {
    replaceEmpty
  } from '@utils/utils'

  export default {
    name: 'tabs',
    components: {
      [Tabs.name]: Tabs,
      [TabPane.name]: TabPane,
    },
    props: {
      list: Array,
      active: [String, Number],
      refreshUrl: {
        type: Boolean,
        default: false,
      }
    },
    model: {
      prop: 'active',
      event: 'change'
    },
    data() {
      return {
        activeKey: this.getActiveKey(),
      }
    },

    watch: {
      active() {
        this.activeKey = this.getActiveKey()
      },
    },

    methods: {
      getKey(item) {
        return replaceEmpty(item.key, item.name) + ''
      },

      getActiveKey() {
        return this.active ? this.active + '' : this.getKey(this.list[0])
      },

      handleChange(tabObj, e) {
        this.$emit('change', tabObj.name)
        this.$emit('onChange', tabObj.index, tabObj.name, tabObj.label, tabObj, e)
        this.handleRefrshUrl()
      },

      handleRefrshUrl() {
        if (!this.refreshUrl)
          return
        this.$mergePageParams({
          tab: this.activeKey
        })
      }
    },

    created() {
      this.handleRefrshUrl()
    },
  }
</script>

<style lang="less">
  @import "~@style_pc/basic/utils/index";
  @height: 41px;
  @radius: @radius-lg;

  /* 修改 element-ui tab 样式 */
  ._tab-warp {
    .el-tabs {
      .el-tabs__header {
        margin-bottom: 0;
        background-color: @gray-f;
      }

      .el-tabs__nav-wrap {
        margin-bottom: -1px;
      }

      .el-tabs__item {
        background-color: @gray-f;

        &:before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 2px;
          transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        }

        &.is-active {
          color: @black;
          background-color: @white;

          &:before {
            background-color: @color-main;
          }
        }
      }
    }

    .el-tabs--card>.el-tabs__header {
      .el-tabs__nav {
        border-width: 0;
      }

      .el-tabs__item:not(.is-active) {
        border-bottom-color: @border-color;
      }
    }
  }

  /* 右侧工具栏 */
  ._tab-warp {
    position: relative;
    background: @white;
    border-top-left-radius: @radius;
    border-top-right-radius: @radius;
    overflow: hidden;

    .tab-tool {
      position: absolute;
      right: 0;
      top: 0;
      margin-right: @size-default;
      height: @height;
      line-height: @height;
      z-index: 1;
    }
  }

  /* 特殊处理：tab+panel 的圆角 */
  ._tab-warp+.panel-box {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
</style>
